import React, { Component,PropTypes } from 'react';
import '../../Stylesheets/wx/comfirmPayMoney.css';
import {ToBcPay,BankList} from '../../Action/auth';

/*维魅力-订单编号4687987*/

export default class ToPay extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            bcMessage:'',
            remindMsg:'',
            bankListNum:0,
            tranType:'',
            judgeup:''
           // tapStatus:false
        };
    }

    static contextTypes = {
        router:PropTypes.object
    }

    async componentWillMount() {
        this.getBankList();
        await this.setState({tranType:this.props.location.query.tranType,
                            judgeup:this.props.location.query.judgeup==0?0:''});
    }

    async getBankList(){
        await BankList()
            .then(res=>{
                this.setState({bankListNum:res.length})
            })
            .catch(err=>{
                console.warn('err',err)
            })
    }

    async toLargePayment(){
        //const orderNo = this.state.bcMessage.orderNo;
        const tranType = this.props.location.query.tranType;
        const purchase = this.props.location.query.purchase;
        const total = this.props.location.query.total;
        const grade = this.props.location.query.grade;
        //判断是否为代理充值
        const isRecharge = this.props.location.query.isRecharge;

        if(this.state.bankListNum==0){
            alert('尚未绑定银行卡，请前往绑定');
            console.log(total)
            if(isRecharge==2){
                this.context.router.push({pathname:'/bankInformation',
                    query:{type:2,tranType:tranType,total:total,grade:grade,isRecharge:2,purchase:purchase}
                })
            }else{
                this.context.router.push({pathname:'/bankInformation',
                    query:{type:2,tranType:tranType,total:total,grade:grade,judgeup:this.state.judgeup}
                })
            }

        }else{
            if(isRecharge==2){
                this.context.router.push({pathname:'/toRecharge',
                    query:{type:2,tranType:tranType,total:total,grade:grade,isRecharge:2,purchase:purchase}
                })
            }else {
                this.context.router.push({
                    pathname: '/toRecharge',
                    query: {tranType: tranType, total: total, grade: grade,judgeup:this.state.judgeup}
                })
            }
            //http://localhost:3000/toPay?grade=1&orderNos=135000&payMuchMoney=135000&total=135000&tranType=2
        }
    }

    async toPay(){
        //this.setState({tapStatus:true})
        await this.getBcInfo();

        const orderNo = this.state.bcMessage.orderNo;
        const tranType = this.props.location.query.tranType;
        const purchase = this.props.location.query.purchase;
        const total = this.props.location.query.total;
        const grade = this.props.location.query.grade;
        //判断是否为代理充值
        const isRecharge = this.props.location.query.isRecharge;
        const judgeup = this.state.judgeup;

        //设置支付的金额大小
        /*if(this.state.bcMessage.price < 10 || this.state.bcMessage.price > 50000){
            this.setState({remindMsg:'单笔消费金额应在10~50000元之间'})
            return;
        }else{
            this.setState({remindMsg:''})
        }*/

        BC.err = function(data) {
            //注册错误信息接受
            alert(data["ERROR"]);
        }
        /**
         * 需要支付时调用BC.click接口传入参数
         */
        BC.click({
                "title":this.state.bcMessage.title, //商品名
                "amount":this.state.bcMessage.price,  //总价（分）
                "out_trade_no":this.state.bcMessage.orderNo, //自定义订单号
                "sign":this.state.bcMessage.sign, //商品信息hash值，含义和生成方式见下文
                "openid" : sessionStorage.getItem('openId')
            },
            {
                wxJsapiSuccess : function(res) {
                    //jsapi接口调用完成后
                    //alert(JSON.stringify(res));
                    if(isRecharge==2){
                        window.location.href='/toPayStatus?orderNo='+orderNo+'&tranType='+tranType+'&total='+total+'&grade='+grade+'&purchase='+purchase+'&isRecharge=2';
                    }else{
                        window.location.href='/toPayStatus?orderNo='+orderNo+'&tranType='+tranType+'&total='+total+'&grade='+grade+'&judgeup='+judgeup;
                    }
                }
            }
        );
        /**
         * click调用错误返回：默认行为console.log(err)
         */
        BC.err = function(err) {
            //err 为object, 例 ｛”ERROR“ : "xxxx"｝;
        }
    }

    async getBcInfo() {
        //tranType(2:充值，1:订单支付)
        //bizParam(金额, 订单支付：订单号)
        await ToBcPay(this.props.location.query.tranType,this.props.location.query.orderNos)
            .then(res=>{
                this.setState({bcMessage:res})
            })
            .catch(err=>{
                alert(err.message)
                console.log(err)
            })
    }

    render() {
        return (
            <div className="containerNav">
                <script id='spay-script' src='https://jspay.beecloud.cn/1/pay/jsbutton/returnscripts?appId=0adec75c-4d18-40f5-9c9b-e5d619f1b5a2'></script>
                <div className="plAll tc bkg_fadeff">
                    <p className="color9 f14 tel">维魅力：尚需支付</p>
                    <p className="mt5 color6 f20"><span>￥</span><span>{this.props.location.query.payMuchMoney}</span></p>
                </div>
                <div className="tc f12 colorRed width_100 plr mtb loginHeight" style={{lineHeight:'36px'}}>
                    {this.state.remindMsg}
                </div>
                {
                    this.state.tranType==2?
                        <div>
                            <div className="paddinglr flex">
                                <button
                                    className='border_4 f16 colorfff width100 bgk_lv borderno comfirmBtn fontMiddle'
                                    style={{marginLeft:20}}
                                    //disabled = {this.state.tapStatus?'disabled':null}
                                    onClick={()=>{this.toPay()}}
                                >
                                    微信支付
                                </button>
                                <div style={{width:30}}></div>
                                <button
                                    className='border_4 f16 colorfff width100 bgk_lv borderno comfirmBtn fontMiddle'
                                    style={{marginRight:20}}
                                    //disabled = {this.state.tapStatus?'disabled':null}
                                    onClick={()=>{this.toLargePayment()}}
                                >
                                    银行卡支付
                                </button>
                            </div>
                            <p className="f14 pAll tc">注释：建议20000元以上使用银行卡支付</p>
                        </div>
                        :
                        <div className="paddinglr flex">
                            <button
                                className='border_4 f16 colorfff width100 bgk_lv borderno comfirmBtn fontMiddle'
                                style={{marginLeft:20}}
                                //disabled = {this.state.tapStatus?'disabled':null}
                                onClick={()=>{this.toPay()}}
                            >
                                微信支付
                            </button>
                        </div>
                }

            </div>
        );
    }
}
